
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td{
            width: 50px;
            height: 50px;
            text-align: center;
            ;
        }
    </style>
</head>
<body>
    <table border="1" cellspacing='0' align="center" width = '1500px' height = '600px'>
        <tr>
            <td><input type="checkbox" class="checkall"></td>
            <td>男</td>
            <td>男</td>
            <td>男</td>
            <td>男</td>
            <td>男</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkson"></td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkson"></td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkson"></td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkson"></td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkson"></td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkson"></td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkson"></td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkson"></td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkson"></td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkson"></td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
        </tr>
    </table>
</body>
<script>
    var trs = document.querySelectorAll('tr')
    for (let i = 0; i < trs.length; i++) {
        trs[i].onmousemove = function(){
            for (let j = 0; j < trs.length; j++) {
                trs[j].style = ''
            }
            this.style = 'background-color: salmon'
        }
        trs[i].onmouseout = function(){
            trs[i].style = ''
        }
    }
    
    var checkall1 = document.querySelector('.checkall')
    var checkson1 = document.querySelectorAll('.checkson')

    checkall1.onclick = function(){//复选框的多选
        var flag = this.checked
        for (let i = 0; i < checkson1.length; i++) {
            checkson1[i].checked = flag
        }
    }

    for (let i = 0; i < checkson1.length; i++) {
        checkson1[i].onclick = function(){
            var biaozhi = true
            for (let j = 0; j < checkson1.length; j++) {
                if(checkson1[j].checked==false){
                    biaozhi = false
                    break;
                }
            }
            checkall1.checked = biaozhi
        }
    }
</script>
</html>